<template>
  <el-dialog
    :visible.sync="showDialog"
    :title="$t('出库记录')"
    width="900px"
    destroy-on-close
    :close-on-click-modal="false">
    <div class="app-container">
      <!-- *************************************搜索区************************************* -->
      <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="90px">
        <el-form-item :label="$t('sku编号')" prop="skuNo">
          <el-input v-model="queryParams.skuNo" placeholder="请输入" clearable style="width: 240px;"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="供应商名称" prop="distrName">
          <el-input v-model="queryParams.distrName" placeholder="请输入" clearable style="width: 240px;"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form> -->

      <!-- 增删改查 -->
      <el-row :gutter="10" class="mb8"> </el-row>

      <el-table :height="calTableHeight() - 50" v-loading="loading" :data="tableData" row-key="menuId">
        <!-- sku编号、类型、业务id、出入数量、操作时间 -->
        <el-table-column show-overflow-tooltip :label="$t('sku编号')" align="center" prop="skuNo" />
        <el-table-column show-overflow-tooltip :label="$t('店铺/平台')" align="center" prop="type">
          <template slot-scope="{ row }">
            <div>{{ row.shopNamePlatformType }}</div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip :label="$t('类型')" align="center" prop="type">
          <template slot-scope="{ row }">
            <span :style="{ color: $randomColor(row.type) }">{{ handleType(row.type) }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip :label="$t('业务id')" align="center" prop="businessId" />
        <el-table-column show-overflow-tooltip :label="$t('出入数量')" align="center" prop="outNum" />
        <el-table-column show-overflow-tooltip :label="$t('操作时间')" align="center" prop="createTime" />
      </el-table>
      <pagination
        v-show="pageTotal > 0"
        :total="pageTotal"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
  </el-dialog>
</template>

<script>
import { sellerStockPositionRecords } from '@/api/distribution/sku/outStore'
import { useDict } from '@/utils/useDict'

export default {
  name: 'outStore',
  components: {},
  data() {
    return {
      /**出入库记录类型 */
      out_warehouse_type_list: [],
      title: '',
      tableData: [],
      showDialog: false,
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        skuId: '',
      },
    }
  },
  created() {
    useDict('out_warehouse_type').then(({ out_warehouse_type }) => {
      this.out_warehouse_type_list = out_warehouse_type
    })
  },

  methods: {
    handleType(type) {
      const index = this.out_warehouse_type_list.findIndex((i) => i.dictValue == type)
      return this.out_warehouse_type_list[index]?.dictLabel
    },
    handleOpen({ title, skuId }) {
      this.title = title
      this.queryParams.skuId = skuId
      this.getList()
      this.showDialog = true
    },

    /** 查询菜单列表 */
    getList() {
      this.loading = true
      sellerStockPositionRecords(this.queryParams).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped></style>
